<div ng-controller="ReaderExploration" ng-style="getStyle()">
  <div ng-if="!iframed" class="oppia-hide-if-small-screenwidth">
    <div class="oppia-feedback-button" ng-click="showFeedbackModal()">
      <center>
        <br><br><br>Feedback
      </center>
    </div>

    <script type="text/ng-template" id="modals/readerFeedback">
      <div class="modal-header">
        <h3>Give Feedback</h3>
      </div>

      <div class="modal-body">
        <h4>Give feedback to the exploration editors</h4>
        <!-- TODO(sfederwisch): make this true<i> They will be given the exploration history already.</i><br />-->
        <em>
          <p>
            Note: This form is meant for exploration-specific feedback. This feedback will be sent to the exploration's editors, who will use your feedback to improve the exploration.
          </p>
          <p>
            To give general feedback about Oppia, please consider using the <a href="https://code.google.com/p/oppia/issues/list"> bug tracker</a> or <a href="https://groups.google.com/forum/?fromgroups#!forum/oppia-dev">Google Group</a>. Thanks in advance!
          </p>
        </em>
        <textarea ng-model="feedback" rows="6" cols="200" placeholder="Please write your feedback or suggestions for the exploration editors here."></textarea>
      </div>

      <div class="modal-footer">
        <button class="btn" ng-click="submit(feedback)">Submit</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/readerFeedbackConfirmation">
      <div class="modal-header">
        <h3>Thank you for giving feedback</h3>
      </div>

      <div class="modal-body">
        <p>
          Your feedback has been successfully submitted, and the exploration creator will see it the next time he/she visits the exploration creation dashboard.
        </p>
        <p>
          Thank you for helping to improve this exploration!
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn" ng-click="cancel()">Close</button>
      </div>
    </script>
  </div>

  <div class="oppia-content" role="main">
    <a href="/learn" class="btn" ng-if="!iframed">
      Return to the gallery
    </a>

    <br><br>

    <div class="oppia-exploration-header">
      <a href="" ng-click="resetPage()" class="pull-right oppia-exploration-header-sublink">
        Clear history and restart
      </a>
      <h3 role="heading"><[title]></h3>
    </div>

    <div class="oppia-iframe-container oppia-exploration">
      <div ng-repeat="response in responseLog track by $index">
        <div ng-if="$index < responseLog.length - 1">
          <div class="oppia-conversation-log">
            <div angular-html-bind="response.previousReaderAnswer">
            </div>
            <div angular-html-bind="response.feedbackAndQuestion">
            </div>
          </div>
        </div>
      </div>

      <div aria-live="polite">
        <div ng-show="responseLog.length > 0">
          <div class="oppia-conversation-log"
               angular-html-bind="responseLog[responseLog.length - 1].previousReaderAnswer">
          </div>

          <div class="oppia-response">
            <div angular-html-bind="responseLog[responseLog.length - 1].feedbackAndQuestion">
            </div>
          </div>
        </div>
      </div>

      <br>

      <div ng-show="finished" class="oppia-response-finished">
        Congratulations, you've finished this exploration!
        Would you like to <a ng-click="resetPage()" href="">play again?</a>
      </div>

      <div ng-hide="finished">
        <!-- This iframe must always be contained within a div in
        which it is the only element. For more information, please
        see the ReaderExploration.js file. -->
        <div ng-hide="answerIsBeingProcessed">
          <div angular-html-bind="inputTemplate"></div>
        </div>
        <div ng-show="answerIsBeingProcessed">
          <center style="font-size: 8em;">
            <span class="oppia-loading-dot-one">.</span>
            <span class="oppia-loading-dot-two">.</span>
            <span class="oppia-loading-dot-three">.</span>
          </center>
        </div>
      </div>
    </div>
  </div>

</div>
